import { useRoute } from '@react-navigation/native'
import React, { useContext,useEffect, useState } from 'react'
import {View,Text,Image,StyleSheet, Pressable} from "react-native"
import { ceil } from 'react-native-reanimated'
import {MyContext} from "../../../App"
import { getUserInfo } from "../../api/home"
const Profile = ({navigation}) => {
    // console.log('profile.........')
    // useRoute()
    const {user} = useContext(MyContext);
    const [userProfile,setUserProfile] = useState({})
    useEffect(() => {
        // console.log('````')
        async function getInfo() {
            try {
                let res = await getUserInfo({uid:user.userId.id});
                data = await res.json();
                // console.log(data)
                setUserProfile({...data})
                console.log(userProfile,'ffff')
            }catch(e) {
                console.log(e)
            }
        }
        getInfo()
    }, [])
    console.log(user)
    return (
        <View style={{flex:1,padding:20}}>
            <Pressable onPress={()=>navigation.navigate('UserInfo',{userid:userProfile.profile.userId})} style={{height:120,flexDirection:'row',alignItems:"center",justifyContent:"space-evenly"}}>
                <View style={{height:65,flexDirection:"row",width:65,borderRadius:32.5,overflow:'hidden'}}>
                {   userProfile&&
                    <Image source={{uri:userProfile&&userProfile.profile&&userProfile.profile.avatarUrl}} style={{flex:1}}></Image>
                }
                </View>
                <View style={{flex:3}}>
                    <View style={{justifyContent:"center",flex:1,paddingHorizontal:10}}>
                        <Text style={{fontSize:20,fontWeight:"bold"}}>{userProfile&&userProfile.profile&&userProfile.profile.nickname}</Text>
                        <Text>Lv.{userProfile&&userProfile.level}</Text>
                    </View>
                </View>
                <View style={{flex:1,justifyContent:"center",alignItems:"flex-end"}}>
                    <Image source={require('../../assets/go.png')} style={{width:20,height:20,marginRight:10}}></Image>
                </View>
                
            </Pressable>
            <View style={{height:100,backgroundColor:'#fff',flexDirection:'row'}}>
                <Pressable style={{flex:1,alignItems:"center",justifyContent:"center"}} onPress={()=>navigation.navigate('CloudPan')}>
                    <Image source={require('../../assets/cloud.png')} style={{width:"50%",height:"50%"}}></Image>
                    <Text style={{marginTop:5}}>云盘</Text>
                </Pressable>
                <Pressable style={{flex:1,alignItems:"center",justifyContent:"center"}} onPress={()=>navigation.navigate('RecentPlay')}>
                    <Image source={require('../../assets/play.png')} style={{width:"50%",height:"50%"}}></Image>
                    <Text style={{marginTop:5}}>最近播放</Text>
                </Pressable>
                <Pressable style={{flex:1,alignItems:"center",justifyContent:"center"}} onPress={()=>navigation.navigate('Collect')}>
                    <Image source={require("../../assets/collect.png")} style={{width:"50%",height:"50%"}}></Image>
                    <Text style={{marginTop:5}}>收藏</Text>
                </Pressable>
                <Pressable style={{flex:1,alignItems:"center",justifyContent:"center"}} onPress={()=>navigation.navigate('BroadCast')}>
                    <Image source={require("../../assets/broadcast.png")} style={{width:"50%",height:"50%"}}></Image>
                    <Text style={{marginTop:5}}>电台</Text>
                </Pressable>
                
            </View>
            <View style={{flex:1}}>
                {userProfile&&
                    <Image source={{uri:userProfile&&userProfile.profile&&userProfile.profile.avatarUrl}}></Image>
                }
                
                
            </View>
        </View>
    )
}
const styles = StyleSheet.create({

})
export default Profile